import React from 'react';

const LoadingSkeleton = () => {
  return (
    <div className="card" style={{ padding: '20px', marginBottom: '20px' }}>
      <div style={{ display: 'flex' }}>
        <div 
          style={{ 
            width: '80px', 
            height: '80px', 
            backgroundColor: '#eee', 
            borderRadius: '4px',
            marginRight: '15px'
          }} 
        />
        <div style={{ flex: 1 }}>
          <div 
            style={{ 
              height: '20px', 
              backgroundColor: '#eee', 
              marginBottom: '10px', 
              width: '70%' 
            }} 
          />
          <div 
            style={{ 
              height: '16px', 
              backgroundColor: '#eee', 
              marginBottom: '10px', 
              width: '50%' 
            }} 
          />
          <div 
            style={{ 
              height: '16px', 
              backgroundColor: '#eee', 
              marginBottom: '10px', 
              width: '40%' 
            }} 
          />
        </div>
      </div>
    </div>
  );
};

export default LoadingSkeleton;